<table class="table table-condensed table-hover table-responsive table-sortable">
    <thead>
    <tr>
        {% if showCategory or showBudget %}
            <td colspan="7" class="no-margin-pagination">{{ groups.links('pagination.bootstrap-4')|raw }}</td>
        {% else %}
            <td colspan="6" class="no-margin-pagination">{{ groups.links('pagination.bootstrap-4')|raw }}</td>
        {% endif %}
        <td colspan="1" class="hidden-xs">
            <!-- Single button -->
            <div class="btn-group btn-group-xs action-menu pull-right" style="display: none;">
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    {{ 'actions'|_ }} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#" class="mass-edit"><span class="fa fa-fw fa-pencil"></span>
                            <span class="txt">{{ 'mass_edit'|_ }}</span></a></li>
                    <li><a href="#" class="bulk-edit"><span class="fa fa-fw fa-pencil-square-o"></span>
                            <span class="txt">{{ 'bulk_edit'|_ }}</span></a></li>
                    <li><a href="#" class="mass-delete"><span class="fa fa-fw fa-trash"></span>
                            <span class="txt">{{ 'mass_delete'|_ }}</span></a></li>
                </ul>
            </div>
        </td>
        <td colspan="1" class="hidden-xs">
            <div class="pull-right">
                <input id="list_ALL" value="1" name="select-all" type="checkbox" class="select-all form-check-inline"/>
            </div>
        </td>
    </tr>
    <tr>
        <th class="hidden-xs">&nbsp;</th>
        <th>{{ trans('list.description') }}</th>
        <th>{{ trans('list.amount') }}</th>
        <th class="hidden-xs">{{ trans('list.date') }}</th>
        <th>{{ trans('list.source_account') }}</th>
        <th>{{ trans('list.destination_account') }}</th>
        {% if showCategory %}
            <th class="hidden-xs">{{ trans('list.category') }}</th>
        {% endif %}
        {% if showBudget %}
            <th class="hidden-xs">{{ trans('list.budget') }}</th>
        {% endif %}
        <th class="hidden-xs">&nbsp;</th><!-- actions -->
        <th class="hidden-xs">&nbsp;</th><!-- checkbox -->
    </tr>
    </thead>
    <tbody>
    {% for group in groups %}
        {% if group.count > 1 %}
            <tr style="border-top:1px #aaa solid;" class="unsortable">
                <td colspan="2" style="border-top:1px #aaa solid;">
                    <small><strong>
                            <a href="{{ route('transactions.show', [group.id]) }}"
                               title="{{ group.title }}">{{ group.title }}</a>
                        </strong></small>
                </td>
                <td colspan="1" style="text-align:right;border-top:1px #aaa solid;">
                    {% for sum in group.sums %}
                        {% if group.transaction_type == 'Deposit' %}
                            {{ formatAmountBySymbol(sum.amount*-1, sum.currency_symbol, sum.currency_decimal_places) }}{% if loop.index != group.sums|length %},{% endif %}
                        {% elseif group.transaction_type == 'Transfer' %}
                            <span class="text-info money-transfer">
                            {{ formatAmountBySymbol(sum.amount*-1, sum.currency_symbol, sum.currency_decimal_places, false) }}{% if loop.index != group.sums|length %},{% endif %}X
                            </span>
                        {% else %}
                            {{ formatAmountBySymbol(sum.amount, sum.currency_symbol, sum.currency_decimal_places) }}{% if loop.index != group.sums|length %},{% endif %}
                        {% endif %}
                    {% endfor %}
                </td>
                <!-- column to span accounts + extra fields -->
                {% if showCategory or showBudget %}
                    <td style="border-top:1px #aaa solid;" colspan="3">&nbsp;</td>
                {% else %}
                    <td style="border-top:1px #aaa solid;" colspan="2">&nbsp;</td>
                {% endif %}
                <td style="border-top:1px #aaa solid;" colspan="2" class="hidden-xs">
                    <div class="btn-group btn-group-xs pull-right">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            {{ 'actions'|_ }} <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li><a href="{{ route('transactions.edit', [group.id]) }}"><span
                                        class="fa fa-fw fa-pencil"></span> {{ 'edit'|_ }}</a></li>
                            <li><a href="{{ route('transactions.delete', [group.id]) }}"><span
                                        class="fa fa-fw fa-trash"></span> {{ 'delete'|_ }}</a></li>
                            <li><a href="#" data-id="{{ group.id }}" class="clone-transaction"><span
                                        class="fa fa-copy fa-fw"></span> {{ 'clone'|_ }}</a></li>
                            <li><a href="#" data-id="{{ group.id }}" class="clone-transaction-and-edit"><span
                                        class="fa fa-copy fa-fw"></span> {{ 'clone_and_edit'|_ }}</a></li>
                        </ul>
                    </div>
                </td>
                <td style="border-top:1px #aaa solid;" class="hidden-xs">&nbsp;</td>
            </tr>
        {% endif %}
        {% for index, transaction in group.transactions %}
            {% set style="" %}
            {% if group.transactions|length == loop.index and group.count > 1 %}
                {% set style="border-bottom:1px #aaa solid;" %}
            {% endif %}
            <tr data-date="{{ transaction.date.format('Y-m-d') }}" data-count="{{ group.count }}"
                data-id="{{ group.id }}">
                <td style=" {{ style|raw }}" class="hidden-xs">
                    {% if transaction.transaction_type_type == 'Withdrawal' %}
                        <span class="object-handle fa fa-long-arrow-left fa-fw"
                              title="{{ trans('firefly.Withdrawal') }}"></span>
                    {% endif %}

                    {% if transaction.transaction_type_type == 'Deposit' %}
                        <span class="object-handle fa fa-long-arrow-right fa-fw"
                              title="{{ trans('firefly.Deposit') }}"></span>
                    {% endif %}

                    {% if transaction.transaction_type_type == 'Transfer' %}
                        <span class="object-handle fa fa-exchange fa-fw" title="{{ trans('firefly.Transfer') }}"></span>
                    {% endif %}

                    {% if transaction.transaction_type_type == 'Reconciliation' %}
                        <span class="object-handle fa-fw fa fa-calculator"
                              title="{{ trans('firefly.reconciliation_transaction') }}"></span>
                    {% endif %}
                    {% if transaction.transaction_type_type == 'Opening balance' %}
                        <span class="object-handle fa-fw fa fa-star-o"
                              title="{{ trans('firefly.Opening balance') }}"></span>
                    {% endif %}
                    {% if transaction.transaction_type_type == 'Liability credit' %}
                        <span class="object-handle fa-fw fa fa-star-o"
                              title="{{ trans('firefly.Liability credit') }}"></span>
                    {% endif %}

                </td>
                <td style=" {{ style|raw }}">
                    {% if transaction.reconciled %}
                        <span class="fa fa-check"></span>
                    {% endif %}
                    {% if transaction.attachments|length > 0 %}
                        <span class="fa fa-paperclip"></span>
                    {% endif %}
                    {% if group.count == 1 %}
                    <a href="{{ route('transactions.show', [group.id]) }}" title="{{ transaction.description }}">
                        {% endif %}
                        {{ transaction.description }}
                        {% if group.count == 1 %}
                    </a>
                    {% endif %}
                </td>
                <td style="{{ style|raw }};text-align:right">
                    {#  deposit #}
                    {% if transaction.transaction_type_type == 'Deposit' %}
                        {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
                        {% if null != transaction.foreign_amount %}
                            ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
                        {% endif %}
                        {# transfer #}
                    {% elseif transaction.transaction_type_type == 'Transfer' %}
                        <span class="text-info money-transfer">
                        {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places, false) }}
                            {% if null != transaction.foreign_amount %}
                                ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places, false) }})
                            {% endif %}
                            </span>
                        {# opening balance #}
                    {% elseif transaction.transaction_type_type == 'Opening balance' %}
                        {% if transaction.source_account_type == 'Initial balance account' %}
                            {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
                            {% if null != transaction.foreign_amount %}
                                ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
                            {% endif %}
                        {% else %}
                            {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
                            {% if null != transaction.foreign_amount %}
                                ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
                            {% endif %}
                        {% endif %}
                        {# reconciliation #}
                    {% elseif transaction.transaction_type_type == 'Reconciliation' %}
                        {% if transaction.source_account_type == 'Reconciliation account' %}
                            {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
                            {% if null != transaction.foreign_amount %}
                                ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
                            {% endif %}
                        {% else %}
                            {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
                            {% if null != transaction.foreign_amount %}
                                ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
                            {% endif %}
                        {% endif %}
                        {# liability credit #}
                    {% elseif transaction.transaction_type_type == 'Liability credit' %}
                        {% if transaction.source_account_type == 'Liability credit' %}
                            {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
                            {% if null != transaction.foreign_amount %}
                                ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
                            {% endif %}
                        {% else %}
                            {{ formatAmountBySymbol(transaction.amount*-1, transaction.currency_symbol, transaction.currency_decimal_places) }}
                            {% if null != transaction.foreign_amount %}
                                ({{ formatAmountBySymbol(transaction.foreign_amount*-1, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
                            {% endif %}
                        {% endif %}


                        {# THE REST #}
                    {% else %}
                        {{ formatAmountBySymbol(transaction.amount, transaction.currency_symbol, transaction.currency_decimal_places) }}
                        {% if null != transaction.foreign_amount %}
                            ({{ formatAmountBySymbol(transaction.foreign_amount, transaction.foreign_currency_symbol, transaction.foreign_currency_decimal_places) }})
                        {% endif %}
                    {% endif %}
                </td>
                <td style=" {{ style|raw }}" class="hidden-xs">
                    {{ transaction.date.isoFormat(monthAndDayFormat) }}
                </td>
                <td style=" {{ style|raw }}">
                    {% if 'Cash account' == transaction.source_account_type %}
                        <span class="text-success">({{ 'cash'|_ }})</span>
                    {% else %}
                        <a href="{{ route('accounts.show', [transaction.source_account_id|default(1)]) }}"
                           title="{{ transaction.source_account_iban|default(transaction.source_account_name) }}">{{ transaction.source_account_name }}</a>
                    {% endif %}
                </td>
                <td style=" {{ style|raw }}">
                    {% if 'Cash account' == transaction.destination_account_type %}
                        <span class="text-success">({{ 'cash'|_ }})</span>
                    {% else %}
                        <a href="{{ route('accounts.show', [transaction.destination_account_id|default(1)]) }}"
                           title="{{ transaction.destination_account_iban|default(transaction.destination_account_name) }}">{{ transaction.destination_account_name }}</a>
                    {% endif %}
                </td>
                {% if showCategory %}
                    <td style=" {{ style|raw }}" class="hidden-xs">
                        {% if transaction.category_id %}
                            <a href="{{ route('categories.show', [transaction.category_id]) }}"
                               title="{{ transaction.category_name }}">{{ transaction.category_name }}</a>
                        {% endif %}
                    </td>
                {% endif %}
                {% if showBudget %}
                    <td style=" {{ style|raw }}" class="hidden-xs">
                        {% if transaction.budget_id %}
                            <a href="{{ route('budgets.show', [transaction.budget_id]) }}"
                               title="{{ transaction.budget_name }}">{{ transaction.budget_name }}</a>
                        {% endif %}
                    </td>
                {% endif %}

                {% if group.count == 1 %}
                    <td style=" {{ style|raw }};" class="hidden-xs">
                        <div class="btn-group btn-group-xs pull-right">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                {{ 'actions'|_ }} <span class="caret"></span></button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                <li><a href="{{ route('transactions.edit', [group.id]) }}"><span
                                            class="fa fa-fw fa-pencil"></span> {{ 'edit'|_ }}</a></li>
                                <li><a href="{{ route('transactions.delete', [group.id]) }}"><span
                                            class="fa fa-fw fa-trash"></span> {{ 'delete'|_ }}</a></li>
                                <li><a href="#" data-id="{{ group.id }}" class="clone-transaction"><span
                                            class="fa fa-copy fa-fw"></span> {{ 'clone'|_ }}</a></li>
                                <li><a href="#" data-id="{{ group.id }}" class="clone-transaction-and-edit"><span
                                            class="fa fa-copy fa-fw"></span> {{ 'clone_and_edit'|_ }}</a></li>
                                <li>
                                    <a href="{{ route('rules.create-from-journal', [transaction.transaction_journal_id]) }}"><span
                                            class="fa fa-fw fa-random"></span> {{ 'create_rule_from_transaction'|_ }}
                                    </a></li>
                            </ul>
                        </div>
                    </td>

                {% endif %}
                {% if group.count != 1 %}
                    <td style=" {{ style|raw }};" class="hidden-xs">
                        &nbsp;
                    </td>
                {% endif %}
                <td style="{{ style|raw }}" class="hidden-xs">
                    <div class="pull-right">
                        <input id="list_{{ transaction.transaction_journal_id }}"
                               value="{{ transaction.transaction_journal_id }}"
                               name="journals[{{ transaction.transaction_journal_id }}]"
                               type="checkbox" class="mass-select form-check-inline"
                               data-value="{{ transaction.transaction_journal_id }}"/>
                    </div>
                </td>
            </tr>
        {% endfor %}
    {% endfor %}
    </tbody>
    <tfoot>
    <tr>
        <td colspan="8">
            <div class="pull-right">
                <!-- Single button -->
                <div class="btn-group action-menu btn-group-xs pull-right" style="display:none;">
                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        {{ 'actions'|_ }} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu btn-group-xs dropdown-menu-right">
                        <li><a href="#" class="mass-edit"><span class="fa fa-fw fa-pencil"></span>
                                <span>{{ 'mass_edit'|_ }}</span></a></li>
                        <li><a href="#" class="bulk-edit"><span class="fa fa-fw fa-pencil-square-o"></span>
                                <span>{{ 'bulk_edit'|_ }}</span></a></li>
                        <li><a href="#" class="mass-delete"><span class="fa fa-fw fa-trash"></span>
                                <span>{{ 'mass_delete'|_ }}</span></a></li>
                    </ul>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        {% if showCategory or showBudget %}
            <td colspan="9" class="no-margin-pagination">{{ groups.links('pagination.bootstrap-4')|raw }}</td>
        {% else %}
            <td colspan="8" class="no-margin-pagination">{{ groups.links('pagination.bootstrap-4')|raw }}</td>
        {% endif %}
    </tr>
    </tfoot>
</table>
<script type="text/javascript" nonce="{{ JS_NONCE }}">
    var cloneGroupUrl = '{{ route('transactions.clone') }}';
    var cloneAndEditUrl = '{{ route('transactions.clone') }}?redirect=edit';
</script>
